import * as React from 'react';
import dayjs from 'dayjs';
import CompleteIcon from '@/imgs/svg/complete.svg';
import { ProgressBar, Modal, Space, Toast, Divider } from 'antd-mobile';
import './index.module.scss';
import { Progress } from 'antd';
const { memo, useState, useMemo } = React;

interface OccupyProps {
  price: number;
  length: number;
  departDate: number | null;
  arriveDate: number | null;
  departTimeStr: string;
  arriveTimeStr: string;
  trainNumber: string;
  departStation: string;
  arriveStation: string;
  durationStr: string | null;
  passengers: string;
  progress: number;
}

function format(d: number) {
  const date = dayjs(d);
  return date.format('MM-DD') + ' ' + date.locale('zh-cn').format('ddd');
}
function occupyDialog(props: OccupyProps) {
  // const { data } = props;
  const {
    price = 0,
    length,
    departDate,
    arriveDate,
    departTimeStr,
    arriveTimeStr,
    trainNumber,
    departStation,
    arriveStation,
    passengers,
    progress,
    durationStr,
  } = props;
  const departDateStr = useMemo(() => format(departDate || 0), [departDate]);
  const arriveDateStr = useMemo(() => format(arriveDate || 0), [arriveDate]);
  const [expanded, setExpanded] = useState(false);
  return (
    <div styleName="occupy-dialog">
      <div styleName="row-content flex-middle-between">
        <div styleName="left">
          <div styleName="notice-title">请确认车次信息</div>
          <div styleName="order-info">
            {departStation}-{arriveStation}
            {trainNumber}
          </div>
        </div>
        <div styleName="right">
          <CompleteIcon />
        </div>
      </div>
      <div styleName="row-content flex-middle-between">
        <div styleName="left">
          <div styleName="notice-title">出发时间</div>
          <div styleName="order-info">
            {departDateStr}
            {departTimeStr}
          </div>
        </div>
        <div styleName="right">
          <CompleteIcon />
        </div>
      </div>
      <div styleName="row-content flex-middle-between">
        <div styleName="left">
          <div styleName="notice-title">乘车人</div>
          <div styleName="order-info">{passengers}</div>
        </div>
        <div styleName="right">
          <CompleteIcon />
        </div>
      </div>
      <div styleName="submit-progress">
        <div styleName="progress-notice flex-middle-between">
          <div styleName="notice-word">核验乘客信息成功，占座中…</div>
          <div styleName="notice-progress">{progress}%</div>
        </div>
        <ProgressBar styleName="progress-bar" percent={progress} />
      </div>
    </div>
  );
}

export default memo(occupyDialog);
